<script setup>
import { ref, watch, inject } from 'vue'
import { useRoute } from 'vue-router'

const menus = inject('menus', [])
const navActive = ref('chat')
const route = useRoute()
const isActive = (name) => {
  return typeof navActive.value === 'string' && navActive.value.substring(0, name.length) === name
}

watch(
  () => route.name,
  async (name) => (navActive.value = name)
)
</script>

<template>
  <div
    class="fixed sm:hidden bottom-0 left-0 w-full h-16 border-t border-[--el-border-color] bg-[--el-bg-color]"
  >
    <div class="flex justify-center items-center">
      <template v-for="menu in menus">
        <RouterLink
          class="nav-item"
          :class="{ active: isActive(menu.name) }"
          :to="{ name: menu.name }"
        >
          <div class="nav-item-ico" v-if="true">
            <FontAwesomeIcon size="xl" :icon="menu.icon" />
          </div>
          <span>{{ menu.title }}</span>
        </RouterLink>
      </template>
    </div>
  </div>
</template>

<style scoped>
.nav-item {
  @apply grow flex flex-col w-16 h-16 text-center pt-1.5 text-[--el-text-color-regular];
}

.nav-item.active {
  @apply text-[--el-color-primary];
}

.nav-item-ico {
  @apply my-1;
}

.nav-item span {
  @apply text-sm;
}
</style>
